import * as THREE from 'three';
// console.log(THREE);


// 引入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 引入动画库
import  gsap from 'gsap';
import { Camera } from 'three';

//  1.创建场景
const scene = new THREE.Scene()



//  2.创建并添加相机
/* PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面 */
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)  //创建相机
/* position.set ( x : Float, y : Float, z : Float ) : this
设置该向量的x、y 和 z 分量。 */
camera.position.set(0,0,10) //设置相机位置
scene.add(camera)//在场景中添加相机



// 13. 通过顶点设置创建几何体矩形
// for (let index = 0; index < 50; index++) {//随机创建50个三角形
    const geometry = new THREE.BufferGeometry();
    const positionArr = new Float32Array()
    for (let ind = 0; ind < 9; ind++) {//每一个三角形需要三个顶点   每个顶点需要三个值
        positionArr[ind] = Math.random()*5;
    }
    geometry.setAttribute('position',new THREE.BufferAttribute(positionArr,9));

    let color = new THREE.Color(Math.random(),Math.random(),Math.random())
    const Material = new THREE.MeshBasicMaterial({color: color} );// 添加材质

    const mesh = new THREE.Mesh( geometry, Material );// 将几何体和材质组合为物体
    
    // console.log(mesh);
    scene.add( mesh );//在场景中添加物体
// }



//  4.设置渲染器并渲染场景
const renderer = new THREE.WebGL1Renderer() //初始化渲染器
renderer.setSize(window.innerWidth,window.innerHeight)  //设置渲染的尺寸大小
document.body.appendChild(renderer.domElement);// 将webgl渲染的内容添加到body
// renderer.render(scene,camera) // 使用渲染器，通过相机将场景渲染进来 


// 5.添加辅助坐标轴
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 6.添加控制器-轨道控制器 可以使得相机围绕目标进行轨道运动  通过不断地重新渲染来实现移动视角的效果
const controls = new OrbitControls(camera,renderer.domElement);
// 10.设置控制器阻尼 更真实  需要在每一帧重新生成时调用controls.update();
controls.enableDamping = true;



window.addEventListener("dblclick",()=>{//双击屏幕全屏/取消全屏
    document.fullscreenElement?document.exitFullscreen():renderer.domElement.requestFullscreen()
})

function render(){//递归实现每一帧的重新渲染
    //  8.制作动画  ——  时间动画原理(通过每一帧的生成时间为基准来渲染动画  clock函数或render自带时间参数)  较简单 略...  
    renderer.render(scene,camera)
    requestAnimationFrame(render);
    controls.update();
}
render();

// 11.监听画面变化渲染画面  
window.addEventListener('resize',()=>{
    camera.aspect = window.innerWidth/window.innerHeight//更新相机
    camera.updateProjectionMatrix();//更新相机投影矩阵
    renderer.setSize(window.innerWidth,window.innerHeight)//更新渲染器尺寸大小
    renderer.setPixelRatio(window.devicePixelRatio)//设置渲染器像素比————就是缩放比
})